<template>
  <div>
    <h2>库存统计图</h2>
    <div class="chart" id="myEchartsFour">图表的容器</div>
  </div>
</template>

<script setup>
  import { inject, onMounted, reactive } from "vue";
  let $echarts = inject("echarts");
  let $http = inject("axios");

  let data = reactive({});
  async function getState() {
    data = await $http({ url: "/four/data" });
  }
  onMounted(() => {
    getState().then(() => {
      let myChart = $echarts.init(document.getElementById("myEchartsFour"));
      myChart.setOption({
          grid:{//位置
            left:"3%",
            right:"4%",
            bottom:"3%",
            containLabel:true//设置包含坐标轴
          },
          xAxis:{
            type:"category",
            data:data.data.chartFour.chartData.day,
            axisLine:{// 设置坐标轴上文字颜色
              lineStyle:{
                color:"#fff"
              }
            }
          },
          yAxis:{
            type:"value",
            axisLine:{
              lineStyle:{
                color:"#fff"
              }
            }
          },
          legend:{},
          tooltip:{//鼠标移入悬浮提示
            trigger:"axis",
            axisPointer:{//设置鼠标选中样式为阴影
              type:"shadow"
            }
          },
          series:[
            {
              name:"服饰",
              type:"bar",
              data:data.data.chartFour.chartData.num.Clothes,
              stack:"total",//数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
              label:{
                //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                show:true
              },
              emphasis:{//高亮的图形样式和标签样式
                focus:"series"//聚焦当前高亮的数据所在的系列的所有图形
              }
            },
            {
              name:"数码",
              type:"bar",
              data:data.data.chartFour.chartData.num.digit,
              stack:"total",
              label:{
                show:true
              },
              emphasis:{
                focus:"series"
              }
            },
            {
              name:"家电",
              type:"bar",
              data:data.data.chartFour.chartData.num.Electrical,
              stack:"total",
              label:{
                show:true
              },
              emphasis:{
                focus:"series"
              }
            },
            {
              name:"家居",
              type:"bar",
              data:data.data.chartFour.chartData.num.gear,
              stack:"total",
              label:{
                show:true
              },
              emphasis:{
                focus:"series"
              }
            },
            {
              name:"日化",
              type:"bar",
              data:data.data.chartFour.chartData.num.Chemicals,
              stack:"total",
              label:{
                show:true
              },
              emphasis:{
                focus:"series"
              }
            },
          ]
        })
    })
  })
</script>

<style>

</style>